<template>
  <view class="ver-layout">
    <!--  标题返回栏  -->
    <view class="back-title-layout hor-layout-center" :style="{opacity: titleOpacity}">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <view class="title-text">学员信息</view>
    </view>
    <!-- 上面的布局  -->
    <view class="top-layout ver-layout" :style="getTopStyle">
      <view class="title-layout hor-layout-center">
        <view class="back-view" @click="navBack">
          <i class="iconfont back-icon">&#xe8de;</i>
        </view>
        <view class="title-text">学员信息</view>
      </view>
      <view class="top-layout-info hor-layout-center">
        <image class="student-icon" :src="studentObj.avatarurl?studentObj.avatarurl:ic_teacher_student_default1"/>
        <view class="ver-layout student-info">
          <view class="student-name">{{ getStudentName }}
          </view>
          <view class="student-class">{{ studentInfo.phone ? studentInfo.phone : '手机号：' }}</view>
        </view>
        <view v-if="studentObj.class_title" class="major-name">{{ studentObj.class_title }}</view>
      </view>
    </view>
    <!-- 课时布局   -->
    <view class="lesson-layout hor-layout">
      <view class="lesson-item ver-layout-center-all">
        <view class="lesson-title">总课时</view>
        <view class="lesson-num">{{ studentInfo.totalnum }}</view>
      </view>
      <view class="divider-line"></view>
      <view class="lesson-item ver-layout-center-all">
        <view class="lesson-title">剩余课时</view>
        <view class="lesson-num">{{ studentInfo.remainnum }}</view>
      </view>
      <view class="divider-line"></view>
      <view class="lesson-item ver-layout-center-all">
        <view class="lesson-title">已消课时</view>
        <view class="lesson-num" style="color:#42B4AB">{{ studentInfo.usenum }}</view>
      </view>
    </view>
    <!--  启用/停用  -->
    <view class="divider-view"></view>
    <view class="start-stop-use hor-layout-side-center">
      <view>启用/停用</view>
      <u-switch v-model="statusChecked" active-color="#6079F5" @change="changeStudentStatus"></u-switch>
    </view>
    <view class="divider-view"></view>
    <!--  功能列表  -->
    <view class="common-use-box">
      <view class="common-use-title">常用功能</view>
      <view class="flex-grid-layout">
        <view class="common-use-item ver-layout-center" v-for="(item,index) in commonUseList" :key="index"
              @click="toStudentDetail(item)">
          <image class="common-use-icon" :class="{'disabled':item.disabled}" :src="item.icon"/>
          <view class="common-use-text">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="divider-view"></view>
    <!--  上课信息  -->
    <view class="common-use-box" style="display: none">
      <view class="common-use-title">上课信息</view>
      <view class="study-info">
        <view class="hor-layout-side-center">
          <view>上课模式</view>
          <view style="color: #F67562;">一对一</view>
        </view>
        <view class="hor-layout-side-center" style="margin-top: 24px">
          <view>上课方式</view>
          <view style="color: #F67562;">线上教学</view>
        </view>
        <view class="hor-layout-side-center" style="margin-top: 24px">
          <view>指导教师</view>
          <view style="color: #F67562;">玉可可</view>
        </view>
      </view>
    </view>
    <view class="divider-view"></view>
  </view>
</template>

<script>
import {
  recordStudentHomework,
  recordStudentTeachGoal,
  recordStudentData,
  recordStudentCscore,
  recordStudentClockIn,
  recordStudentCostLesson
} from "@/router.js"
import {StudentInfoApi} from "@/api/recordStudy.js"

let ic_teacher_student_default1 = require("@/static/home/ic_student_default1.png")
let ic_user_top_bg = require("@/static/home/ic_user_top_bg.png")
let engine = new StudentInfoApi()
export default {
  name: "StudentInfo",
  data() {
    return {
      ic_teacher_student_default1,
      titleOpacity: 0,
      statusChecked: false,
      studentObj: {},
      studentInfo: {},
      commonUseList: [
        {title: '作业详情', icon: require("@/static/home/ic_student_homework.png"), action: recordStudentHomework},
        {title: '教学目标', icon: require("@/static/home/ic_student_teach_goal.png"), action: recordStudentTeachGoal},
        {title: '学生评价', icon: require("@/static/home/ic_student_comment.png"), action: recordStudentTeachGoal,},
        {title: '学生详情', icon: require("@/static/home/ic_student_detail.png"), action: recordStudentData},
        {title: '积分详情', icon: require("@/static/home/ic_student_cscore.png"), action: recordStudentCscore},
        {title: '消课记录', icon: require("@/static/home/ic_student_sign.png"), action: recordStudentCostLesson}
      ]
    }
  },
  computed: {
    getStudentName() {
      //realname： 一对一进入，student_name：一对多进入
      let name = this.studentObj.realname || this.studentObj.student_name
      return name ? name : '姓名：'
    },
    getTopStyle() {
      return {backgroundImage: `url(${ic_user_top_bg})`}
    }
  },
  onLoad(options) {
    //一对一：student_id-id  一对多：student_id-student_id
    options.student_id = options.student_id || options.id
    this.studentObj = options
    this.getStudentInfo()
  },
  onPageScroll(e) {
    // console.log("onPageScroll", e)
    this.titleOpacity = e.scrollTop * 0.005
  },
  methods: {
    getStudentInfo() {
      let sid = this.studentObj.student_id
      let rid = this.studentObj.class_id || ''
      engine.getStudentInfo({sid, rid}).then(res => {
        this.studentInfo = res.data
        this.statusChecked = this.studentInfo.status === 1 //0否1是
      })
    },
    changeStudentStatus() {
      let status = this.statusChecked ? 1 : 2 //是否启用,1启用2停用
      let student_id = this.studentObj.student_id
      engine.updateStudentStatus({status, student_id}).then(res => {
        if (this.statusChecked) this.$u.toast("启用成功！")
        else this.$u.toast("停用成功！")
        this.getStudentInfo()
      })
    },
    toStudentDetail(item) {
      this.$u.route({url: item.action, params: {...this.studentObj, ...item}})
    },
    navBack() {
      this.$u.route({type: 'back'})
    },
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.back-title-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  background: #666D7A;
}

.title-layout {
  width: 100%;
  height: 44px;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.title-text {
  width: 100%;
  margin-right: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.top-layout {
  position: absolute;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 140px);
  background-repeat: repeat;
  background-size: 100% 100%;
}

.top-layout-info {
  padding: 0px 12px;
  padding-top: 10px;
}

.student-icon {
  width: 48px;
  height: 48px;
  background: #F8D0D0;
  border-radius: 50%;
}

.student-info {
  flex: 1;
  margin-left: 12px;
}

.student-name {
  font-size: 14px;
  color: #FFFFFF;
}

.student-class {
  font-size: 12px;
  color: #FFFFFF;
}

.major-name {
  width: 60px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #F67562;
  border-radius: 9px;
  /*文本样式*/
  font-size: 12px;
  color: #FFFFFF;
}

.lesson-layout {
  z-index: 100;
  width: calc(100% - 24px);
  padding: 10px 0px;
  margin: auto;
  margin-top: calc(140px - 24px + var(--status-bar-height));
  background: #FFFFFF;
  border-radius: 3px;
}

.lesson-item {
  flex: 1;
}

.divider-line {
  width: 1px;
  height: 58px;
  background: #42B4AB;
}

.lesson-title {
  font-size: 12px;
  color: #333333;
}

.lesson-num {
  margin-top: 13px;
  font-size: 14px;
  color: #333333;
}

.divider-view {
  width: 100%;
  height: 20px;
}

.start-stop-use {
  width: calc(100% - 24px);
  height: 60px;
  margin: auto;
  padding: 0px 12px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #eeeeee;
  box-shadow: 0px 4px 1px 0px rgba(234, 237, 253, 0.17);
}

.common-use-box {
  margin: auto;
  width: calc(100% - 24px);
  padding-bottom: 20px;
  background: #FFFFFF;
  border-radius: 3px;
  /* 文本样式 */
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.common-use-title {
  padding-top: 24px;
  padding-left: 12px;
}

.common-use-item {
  width: 25%;
  padding-top: 20px;
  padding-bottom: 5px;
}

.common-use-icon {
  width: 26px;
  height: 26px;
  /*background: #F67562;*/
}

.common-use-icon.disabled {
  filter: grayscale(100%);
}

.common-use-text {
  margin-top: 12px;
  font-size: 12px;
  font-family: PingFang SC;
  color: #333333;
}

.study-info {
  margin: 0px 24px;
  padding-top: 18px;
}
</style>
